<template>
  <view>
    <view class="img">
      <image :src="ServerInfo.imgUrl" mode=""></image>
    </view>
    <view class="uvcard">
      <view class="card">
        <uni-card :title="ServerInfo.teamName" :thumbnail="ServerInfo.imgUrl">
          <view class="card-body">
            <view class="left">
              <view >{{ServerInfo.leaderName}}</view>
              <view class="" style="color: #ff2121;">领导人</view>
            </view>
            <view class="right">
              <view >{{length}}</view>
              <view class="" style="color: #ff2121;">组织人数</view>
            </view>
          </view>
        </uni-card>
      </view>
      <view class="body">
        <view class="body-top">组织介绍</view>
        <view class="body-bottom">
          {{ServerInfo.teamInfo}}
        </view>
      </view>
      <view class="member">

        <uni-section title="成员信息" type="line">
          <uni-card v-for="(item,i) in members" :key="i" :title="item.userName"
            :sub-title="`性别:${item.sex==1?'男':'女'}  年龄:${item.age}`" :extra="`邮箱:${item.email}`"
            :thumbnail="item.avatar">
            <text>备注：{{item.remark}}</text>
          </uni-card>
        </uni-section>
      </view>
    </view>
    <view class="footer" v-if="!create_by">
      <view class="footer-body">
        <view style="background-color: pink" @click="diswarm">退出暖心团</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    outheart,
    getHeartMember,
    selectServerInfo,
    isTeamLeader
  } from "@/api/team/team"
  export default {
    data() {
      return {
        ServerInfo: {},
        imgUrl: "",
        flage: true,
        members: [],
        create_by: false,
        length:0,
      };
    },
    onLoad(option) {
      //获取服务队信息
      this.getServerInfo(option.teamid);
      // console.log(option.teamid)
      //获取服务队人员
      this.getHeartMembers(option.teamid);
      //获取创建人id,判断是否为创建人
      this.getcreateby(option.teamid);
    },
    methods: {
      getcreateby(teamid) {
        isTeamLeader(teamid).then(response => {
          this.create_by = response.data
        })
      },
      //获取组织成员
      getHeartMembers(teamid) {
        getHeartMember(teamid).then(response => {
          this.members = response.data
          // console.log(111,response)
          this.length=this.members.length
        })
      },
      //获取组织信息
      getServerInfo(teamid) {
        selectServerInfo(teamid).then(response => {
          // console.log(response)
          this.ServerInfo = response.data
          this.imgUrl = this.ServerInfo.imgUrl
        })
      },
      diswarm() {
        uni.showModal({
          title: '警告',
          content: '是否退出此暖心团',
          success: (res) => {
            if (res.confirm) {
              outheart().then(response => {
                uni.switchTab({
                  url: '/pages/mine/index'
                })
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
    }

  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }

  .img {
    width: 750rpx;
    height: 500rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .uvcard {
    position: absolute;
    width: 100%;
    z-index: 99;
    top: 150px;
  }

  .card {
    .card-body {
      display: flex;
      justify-content: space-between;

      .left {
        .name {
          color: #ff2121;
          font-size: 18px;
        }
      }

      .right {
        text-align: center;

        .num {
          font-size: 18px;
          color: orange;
        }
      }

    }
  }



  .body {
    margin: 10px;

    .body-top {
      font-size: 20px;
      margin: 10px;
    }

    .body-bottom {
      // width: 400rpx;
      // height: 200rpx;
      margin: 20px;
      border: 3px solid #ff2121;
      border-radius: 10px;
      padding: 10px;
    }
  }

  .footer {
    z-index: 999;
    width: 750rpx;
    height: 80rpx;
    position: fixed;
    border: 2px solid #efefef;
    border-radius: 20px;
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;

    .footer-body {
      // padding: 10px;

      width: 100%;
      height: 100%;
      border-radius: 20px;
      text-align: center;
      line-height: 80rpx;
      font-size: 20px;
    }
  }

  .member {
    margin-bottom: 30px;
  }
</style>
